/*
Toast Framework
grid.less

@width defines the overall grid width. The columns and gutters are 
percentage-based, but at 940px the columns are 60px and the 
gutters are 20px.
*/

@width: 940px;

.wrap {
	max-width:@width;
	padding:10px;
	margin:0 auto;
}

/*
Column container
*/
.grids {
	width:auto;
	max-width:@width + 20px;
	clear:both;
	margin:0 0 0 -2.083%;
	list-style:none; /* So we can make grids out of lists. */
	overflow:hidden; /* Clear the floats */
}

[class^="grid-"]{
	float:left;
	margin:0 2.083% 0 0;
}
.grids [class*="grid-"]{
	margin:0 0 0 2.083%;
}

.grid-1{ width:6.25% }
.grid-2{ width:14.583% }
.grid-3{ width:22.917% }
.grid-4{ width:31.25% }
.grid-5{ width:39.583% }
.grid-6{ width:47.917% }
.grid-7{ width:56.25% }
.grid-8{ width:64.583% }
.grid-9{ width:72.917% }
.grid-10{ width:81.25% }
.grid-11{ width:89.583% }
.grid-12{ width:97.917%; margin:0; }

@media screen and (max-width: 700px) {
	.grids {
		margin: 0;
		width: auto;
	}

	[class*="grid-"] {
		width: auto;
		margin: 0;
	}
}